<template>
    <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off"
        @finish="onFinish">
        <a-form-item label="标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
            <a-input v-model:value="formState.title" />
        </a-form-item>
        <a-form-item label="备注" name="description" :rules="[{ required: true, message: '请输入备注' }]">
            <a-input v-model:value="formState.description" />
        </a-form-item>
        <a-form-item label="项目文件" name="codeContent">
            <a-upload-dragger v-model:fileList="fileList" name="file" :beforeUpload="() => false" :multiple="true">
                <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">拖拽上传</p>
            </a-upload-dragger>
        </a-form-item>
        <a-form-item label="原型图" name="imagePath">
            <a-upload-dragger v-model:file-list="PathList" list-type="picture-card" :beforeUpload="() => false"
                :multiple="true" @preview="handlePreview">
                <div v-if="fileList.length < 8">
                    <p class="ant-upload-drag-icon">
                        <inbox-outlined></inbox-outlined>
                    </p>
                    <p class="ant-upload-text">拖拽上传</p>
                </div>
            </a-upload-dragger>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
            <a-button :loading="loading" type="primary" html-type="submit">上传</a-button>
        </a-form-item>
    </a-form>
    <a-modal v-model:visible="previewVisible" :style="previewStyle" :title="previewTitle" :footer="null">
        <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { InboxOutlined } from "@ant-design/icons-vue";
import FileAjax from '@/apis/file'
import Admin from '@/apis/admin'

const emit = defineEmits(['CloseModel'])

const fileList = ref([]);
const PathList = ref([]);
const loading = ref<boolean>(false);

interface FormState {
    title: string;
    description: string;
    codeContent: string[];
    imagePath: string;
}
const formState = reactive<FormState>({
    title: '',
    description: '',
    codeContent: [],
    imagePath: '',
});

const GetImageWidth = (File: any) => {
    return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => {
            resolve({
                width: img.width + 'px',
                height: img.height + 'px',
            });
        };
        img.src = window.URL.createObjectURL(File);
    });
}

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const previewStyle = ref({});
const handlePreview = async (file: any) => {
    previewStyle.value = (await GetImageWidth(file.originFileObj)) as any;
    previewImage.value = window.URL.createObjectURL(file.originFileObj);
    previewVisible.value = true;
    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};


function runderFile(file: File) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function () {
            resolve({
                name: file.name,
                content: this.result
            });
        }
    })
}

const onFinish = async () => {
    loading.value = true;
    var CodeArray = [];
    for (let i = 0; i < fileList.value.length; i++) {
        var file: any = await runderFile((fileList.value[i] as any).originFileObj);
        CodeArray.push(file.name + '<<$$^^|^^$$>>' + file.content);
    }
    var CodeContent = CodeArray.join('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');

    let fm = new FormData()
    for (let i = 0; i < PathList.value.length; i++) {
        fm.append(`file`, (PathList.value[i] as any).originFileObj)
    };
    var picture = (await FileAjax.UpLoadFile(fm)).join(';');

    Admin.CreateTopic({
        title: formState.title,
        description: formState.description,
        codeContent: CodeContent,
        imagePath: picture,
    }).then((res: any) => {
        loading.value = false;
        emit('CloseModel');
    });
};

</script>
<style lang="less" scoped>
:deep(.ant-upload-drag) {
    margin-bottom: 10px;
}

:deep(.ant-upload.ant-upload-drag .ant-upload) {
    padding: 10px 0;
}

:deep(.ant-upload.ant-upload-drag p.ant-upload-drag-icon) {
    margin-bottom: 5px;

}
</style>